.q-scrollbar {
  position: relative;
  height: 100%;
  overflow: hidden;

  &__wrap {
    height: 100%;
    overflow: scroll;

    &_hidden-default {
      scrollbar-width: none;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    }
  }

  &__view {
    min-height: 100%;
  }

  &__thumb {
    position: relative;
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    background-color: var(--color-primary-blue);
    border-radius: var(--border-radius-base);
    transition: 0.3s background-color;

    &:hover {
      background-color: var(--color-primary-blue);
    }

    &_secondary {
      background-color: rgba(var(--color-rgb-gray), 0.16);

      &:hover,
      &:active {
        background-color: rgba(var(--color-rgb-gray), 0.32);
      }
    }
  }

  &__bar {
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 1;
    border-radius: var(--border-radius-base);
    opacity: 0;
    transition: opacity 120ms ease-out;

    &_vertical {
      top: 6px;
      width: 2px;

      > .q-scrollbar__thumb {
        width: 100%;
      }
    }

    &_horizontal {
      left: 6px;
      height: 2px;

      > .q-scrollbar__thumb {
        height: 100%;
      }
    }

    &_secondary.q-scrollbar__bar_vertical {
      width: 8px;
      background-color: var(--color-tertiary-gray);
    }

    &_secondary.q-scrollbar__bar_horizontal {
      height: 8px;
      background-color: var(--color-tertiary-gray);
    }
  }

  &_visible >,
  &:hover >,
  &:active >,
  &:focus >,
  &__wrap.focus-visible ~ {
    & .q-scrollbar__bar {
      opacity: 1;
      transition: opacity 340ms ease-out;
    }
  }
}
